<template>
  <Head ref="headRef"></Head>

  <a-layout id="app-layout-sider">
    <a-layout-sider
      v-model="collapsed"
      theme="light"
      class="layout-sider"
      width="100"
    >
      <!-- <div class="logo">
        <img class="pic-logo" src="~@/assets/img/avatar.jpeg" />
        <div class="logo-text">
          <div class="title">东方巨龙</div>
          <div>D0001</div>
        </div>
        <div class="label">教师</div>
      </div> -->

      <!-- 
        <a-popover trigger="hover">
          <template #content>
            <div class="popover-btn border-b" @click="uploadList">上传列表</div>
            <div class="popover-btn border-b" @click="$refs.setRef.show()">
              设置
            </div>
            <div class="popover-btn border-b" @click="$refs.versionRef.show()">
              版本信息
            </div>
            <div class="popover-btn">退出账号</div>
          </template>
          <img class="pic-logo1" src="~@/assets/img/system.png" />
        </a-popover> -->
      <a-menu
        class="menu-item"
        theme="light"
        mode="inline"
        :selectedKeys="[current]"
        @menu-item-click="menuHandle"
      >
        <a-menu-item v-for="(menuInfo, index) in menu" :key="index">
          <!-- <icon-font :type="menuInfo.icon" /> -->
          <img
            v-if="menuInfo.title == '磨课'"
            class="menu-img"
            src="../assets/img/class2.png"
            alt=""
            srcset=""
          />

          <!-- <img
            v-if="menuInfo.title == '磨课' "
            class="menu-img"
            src="../assets/img/class4.png"
            alt=""
            srcset=""
          /> -->

          <!-- <img
            v-if="menuInfo.title == '听课评'"
            class="menu-img"
            src="../assets/img/class1.png"
            alt=""
            srcset=""
          /> -->

          <img
            v-if="menuInfo.title == '听课评'"
            class="menu-img"
            src="../assets/img/class3.png"
            alt=""
            srcset=""
          />
          <div class="menu-title">
            {{ menuInfo.title }}
          </div>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content class="layout-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>

  <UoloadList ref="uoloadListRef"></UoloadList>
  <version ref="versionRef"></version>
  <Set ref="setRef"></Set>
</template>
<script>
import UoloadList from "../components/uoloadList.vue";
import version from "../components/version.vue";
import Set from "../components/set.vue";
import Head from "../components/head.vue";

export default {
  components: {
    UoloadList,
    version,
    Set,
    Head,
  },

  name: "AppSider",
  data() {
    return {
      visible: false,
      collapsed: true,
      current: "menu_1",
      menu: {
        menu_1: {
          icon: "icon-kuangjia",
          title: "磨课",
          pageName: "classroom",
          params: {
            // test: 'hello'
          },
        },
        // menu_2: {
        //   icon: "icon-xitongguanli",
        //   title: "系统",
        //   pageName: "Os",
        //   params: {},
        // },
        // menu_3: {
        //   icon: "icon-woshiyingjianchangjia",
        //   title: "硬件",
        //   pageName: "Hardware",
        //   params: {},
        // },
        // menu_4: {
        //   icon: "icon-UI-xuanzhong",
        //   title: "前端",
        //   pageName: "vueui",
        //   params: {},
        // },
        // menu_5: {
        //   icon: "icon-UI-xuanzhong",
        //   title: "磨课",
        //   pageName: "classroom",
        //   params: {},
        // },
        menu_6: {
          icon: "icon-UI-xuanzhong",
          title: "听课评",
          pageName: "grindLessons",
          params: {},
        },
      },
    };
  },
  created() {},
  mounted() {
    this.menuHandle();
  },
  methods: {
    menuHandle(key) {
      console.log("sider menu key:", key);
      this.current = key ? key : this.current;

      const linkInfo = this.menu[this.current];
      this.$router.push({ name: linkInfo.pageName, params: linkInfo.params });
    },
    uploadList() {
      this.$refs.uoloadListRef.show();
    },
    changeMenu(e) {
      console.log("sider menu e:", e);
      //this.current = e.key;
    },
    handleOk() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
// 嵌套
#app-layout-sider {
  height: 100%;
  background: #fafafa;
  .logo {
    // border-bottom: 1px solid var(--color-neutral-3);
  }
  .pic-logo {
    border-radius: 50%;
    height: 32px;
    //background: rgba(139, 137, 137, 0.2);
    margin: 10px;
  }

  .pic-logo1 {
    width: 20px;
    height: 20px;
    margin-left: 15px;
  }

  .layout-sider {
    width: 200px;
    // border-top: 1px solid var(--color-neutral-3);
    // border-right: 1px solid var(--color-neutral-3);
  }
  .menu-item {
    .arco-menu-item {
      // background-color: var(--color-bg-white);
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 0 8px !important;
      display: flex;
      align-items: center;
    }
  }
  .layout-content {
    background: #fafafa;
    // background: var(--color-menu-light-bg);
  }
}
:deep(.arco-menu .arco-menu-item .arco-icon) {
  margin-right: 8px;
  display: inline-block;
}

.logo {
  display: flex;
  align-items: center;
  height: 70px;
  .label {
    background: #ffedd9;
    font-size: 12px;
    color: #fc941d;
    padding: 5px;
    margin-left: 10px;
    border-radius: 43px 43px 43px 43px;
  }
  .title {
    width: 70px;
    font-size: 14px;
    white-space: nowrap; /* 禁止文本换行 */
    overflow: hidden; /* 隐藏超出容器的文本 */
    text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
    margin-bottom: 5px;
  }
  .logo-text {
    text-align: left;
  }
}

.popover-btn {
  width: 80px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.border-b {
  border-bottom: 1px solid #e5e6eb;
}
.menu-img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.menu-title {
  font-size: 18px;
}
</style>
